<template>
  <view class="tab-component">
    <view class="text1">CNLY</view>
    <view class="text2">
      <text class="shuang11">11~11</text>
      抢先购</view
    >
    <view class="text3">大牌提前买</view>
    <view class="text4">ochirly</view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.tab-component {
  position: relative;
  z-index: 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15rpx 0;
  .text1 {
    padding: 0 40rpx;
    color: #ec6a83;
  }
  .text2 {
    color: #fff;
    font-size: 36rpx;
    font-weight: 700;
    transform: skewX(-10deg);
    .shuang11 {
      letter-spacing: -4px;
    }
  }
  .text3 {
    color: #fff;
    background: #aa301c;
    font-size: 22rpx;
    line-height: 28rpx;
    height: 30rpx;
    padding: 0 10rpx;
    border-radius: 15rpx;
    margin-left: 15rpx;
  }
  .text4 {
    padding: 0 40rpx;
    font-size: 20rpx;
    color: #ec6a83;
  }
}
</style>
